.contact_form {
    width: 70%;
    margin: 0 auto
}

.contact_form ul {
    width: 750px;
    list-style: none;
    margin: 0px;
    padding: 0px
}

.contact_form li {
    padding: 12px;
    border-bottom: 1px solid #eee
}


/* 给类名为contact_form的元素的第一个子元素li和最后一个子元素li加底部边框 */

.contact_form li:first-child,
.contact_form li:last-child {
    border-bottom: 1px solid #777
}

.contact_form span {
    width: 150px;
    display: inline-block
}


/* 给类名为usually的元素下的input标签定义宽高和内边距 */

.usually input {
    height: 20px;
    width: 220px;
    padding: 5px 8px
}

*:focus {
    outline: none
}


/* 给类名为usually的元素下的input和textarea标签设置背景图片、内阴影和边框圆角 */

.usually input,
.usually textarea {
    background: url(../images/attention.png) no-repeat 98% center;
    box-shadow: 0 10px 15px #eee inset;
    border-radius: 2px
}

.contact_form textarea {
    padding: 8px;
    width: 300px
}


/* 当该元素获得焦点时，设置背景颜色为白色 */

.usually input:focus,
.usually textarea:focus {
    background: #fff
}


/* 设置按钮的样式 */

input[type=submit] {
    margin-left: 156px;
    background-color: #68b12f;
    border: 1px solid #509111;
    border-radius: 3px;
    color: white;
    padding: 6px 20px;
    text-align: center
}


/* 当鼠标悬停在提交按钮时，该按钮背景颜色透明度为0.85，光标变成小手 */

input[type=submit]:hover {
    opacity: .85;
    cursor: pointer
}


/* 当该元素获得焦点填写内容无效时，设置警告背景图片 */

.usually input:focus:invalid,
.usually textarea:focus:invalid {
    background: url(../images/warn.png) no-repeat 98% center;
    box-shadow: 0 0 5px #d45252
}


/* 当该元素获取有效的填写内容时，设置正确背景图片 */

.usually input:required:valid,
.usually textarea:required:valid {
    background: url(../images/right.png) no-repeat 98% center;
    box-shadow: 0 0 5px #5cd053
}